import { useState } from 'react'
import { SketchPicker } from 'react-color'
export default function InputColor({ color, onChangeComplete, ...rest }) {
	const [visibe, setVisibe] = useState(false)
	return (
		<div
			style={{
				position: 'relative',
				backgroundColor: color,
				width: '68%',
				height: 32,
				border: 'solid 1px #eee',
				borderRadius: 4,
			}}
			onClick={e => {
				setVisibe(!visibe)
			}}
			{...rest}
		>
			{visibe && (
				<div
					style={{
						zIndex: 1,
						position: 'relative',
						top: -200,
						left: -260,
						marginTop: '32px',
						marginLeft: '-70px',
					}}
					onClick={e => {
						e.stopPropagation()
						e.preventDefault()
					}}
				>
					<span
						style={{
							zIndex: 999,
							position: 'absolute',
							top: 0,
							left: '4px',
							color: '#999',
							cursor: 'pointer',
						}}
						onClick={e => {
							setVisibe(false)
						}}
					>
						关闭
					</span>
					<SketchPicker color={color} onChangeComplete={onChangeComplete} />
				</div>
			)}
		</div>
	)
}
